<!--商品管理 -->
<template>
  <div class="admin-body">
    <el-row>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item >商品管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-row style="padding: 15px">

      <el-row class="main">
        <el-row  style="min-height: 40px;display: flex;">
          <el-col  style="margin-bottom: 5px;" align="left">
            <el-input v-model="key" clearable style="width: 300px;" placeholder="输入关键词查询" class="kz_search">
              <el-button slot="append" type="primary"  @click="getstart()">搜索</el-button>
            </el-input>
          </el-col>
          <el-col  style="margin-bottom: 5px;" align="right">
            <el-button type="primary" @click="goHref('classified')" style="">分类管理</el-button>
            <el-button type="primary" @click="add()" style="">添加商品</el-button>
          </el-col>
        </el-row>
        <!--表格-->
        <el-table
          select-on-indeterminate
          ref="multipleTable"
          border
          align="left"
          :data="tableData">
          <el-table-column
            type="index"
            label="序号"
            width="50">
          </el-table-column>
          <el-table-column
            prop="img"
            label="商品图片">
            <template slot-scope="scope">
              <el-popover
                v-if="scope.row.img"
                placement="bottom"
                trigger="hover">
                <div style="height: 300px;overflow-y: auto">
                  <img v-for="i in scope.row.img.split(',')" :src="i" alt="" width="300px" style="display: block">
                </div>
                <img slot="reference" :src="scope.row.img.split(',')[0]" alt="" width="60px" height="60px">
              </el-popover>
              <span v-if="!scope.row.img">无</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="商品名称">
          </el-table-column>
          <el-table-column
            prop="type_name"
            label="商品分类">
          </el-table-column>
          <el-table-column
            prop="stock"
            label="库存">
          </el-table-column>
          <el-table-column
            prop="old_money"
            label="原价">
          </el-table-column>
          <el-table-column
            prop="new_money"
            label="现价">
          </el-table-column>
          <el-table-column
            label="创建时间">
            <template slot-scope="scope">
              {{formatDate(scope.row.addtime)}}
            </template>
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button    style="color: rgba(243, 93, 96, 1)" @click="changeMes(scope.row.id,0)"  size="small" type="text">
                删除
              </el-button>
              <el-button @click="edit(scope.row)"  size="small" type="text">
                编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <el-row style="margin-top: 20px">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" align="right">
            <el-pagination
              style="text-align: right;margin-bottom:70px;"
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="dataTotal">
            </el-pagination>
          </el-col>
        </el-row>
      </el-row>
    </el-row>
    <el-dialog title="新增" :visible.sync="addVisible" width="500px" :modal-append-to-body="false">
      <el-form :model="adddata" :rules="addrules" ref="adddata">
        <el-form-item label="商品图片：" :label-width="formLabelWidth" prop="img">
          <my-upload ref="my_upload"  :multiple="true"  @change="SuccessUpload"></my-upload>
        </el-form-item>
        <el-form-item label="商品名称：" :label-width="formLabelWidth" prop="name">
          <el-input v-model="adddata.name" clearable></el-input>
        </el-form-item>
        <el-form-item label="所属分类：" :label-width="formLabelWidth" prop="type_id">
          <el-select style="margin-left: 20px" v-model="adddata.type_id" clearable  placeholder="请选择商品分类">
            <el-option
              v-for="item in spData"
              :key="item.id"
              :label="item.type_name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品库存：" :label-width="formLabelWidth" prop="stock">
          <el-input  v-model="adddata.stock"  clearable></el-input>
        </el-form-item>
        <el-form-item label="原价：" :label-width="formLabelWidth" prop="old_money">
          <el-input  v-model="adddata.old_money"  clearable></el-input>
        </el-form-item>
        <el-form-item label="现价：" :label-width="formLabelWidth" prop="new_money">
          <el-input  v-model="adddata.new_money"  clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="SubmitAdd('adddata')">确 定</el-button>
        <el-button @click="addVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑" :visible.sync="editVisible" width="500px" :modal-append-to-body="false">
      <el-form :model="editdata" :rules="editrules" ref="editdata">
        <el-form-item label="商品图片：" :label-width="formLabelWidth" prop="img">
          <my-upload ref="my_upload_edit"  :multiple="true" @changedel="delImg"  @change="SuccessUploadEdit"></my-upload>
        </el-form-item>
        <el-form-item label="所属分类：" :label-width="formLabelWidth" prop="type_id">
          <el-select style="margin-left: 20px" v-model="editdata.type_id" clearable  placeholder="请选择商品分类">
            <el-option
              v-for="item in spData"
              :key="item.id"
              :label="item.type_name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品库存：" :label-width="formLabelWidth" prop="stock">
          <el-input  v-model="editdata.stock"  clearable></el-input>
        </el-form-item>
        <el-form-item label="原价：" :label-width="formLabelWidth" prop="old_money">
          <el-input  v-model="editdata.old_money"  clearable></el-input>
        </el-form-item>
        <el-form-item label="现价：" :label-width="formLabelWidth" prop="new_money">
          <el-input  v-model="editdata.new_money"  clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="SubmitEdit('editdata')">确 定</el-button>
        <el-button @click="editVisible = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import MyUpload from '../../components/MyUpload'
  export default {
    name: "GoodsManage",
    components:{
      MyUpload
    },
    mounted() {
      // if (!this.$store.state.login.in) {
      //   this.$router.push({name: "login", params: {userId: 123}})
      // }
      this.getstart()
      // this.loadmap()
    },
    data() {
      return {
        pageSize: 10,
        page: 1,
        dataTotal: 0,
        tableData:[],
        addVisible:false,
        formLabelWidth:'100px',
        adddata:{
          shop_id:'',
          name:'',
          img:'',
          stock:'',
          old_money:'',
          new_money:'',
          type:1,
          type_id:'',
        },
        addrules:{
          name: [
            {required: true, message: '请输入商品名称', trigger: 'blur'}
          ],
          img: [
            {required: true, message: '请上传商品图片', trigger: 'blur'}
          ],
          old_money: [
            {required: true, message: '请输入原价', trigger: 'blur'}
          ],
          new_money: [
            {required: true, message: '请输入现价', trigger: 'blur'}
          ],
          stock: [
            {required: true, message: '请输入商品库存', trigger: 'blur'}
          ],
          type_id: [
            {required: true, message: '请选择商品分类', trigger: 'blur'}
          ],
        },
        editVisible:false,
        editdata:{
          shop_id:'',
          img:[],
          stock:'',
          old_money:'',
          new_money:'',
          type:1,
          type_id:'',
        },
        editrules:{
          img: [
            {required: true, message: '请上传商品图片', trigger: 'blur'}
          ],
          old_money: [
            {required: true, message: '请输入原价', trigger: 'blur'}
          ],
          new_money: [
            {required: true, message: '请输入现价', trigger: 'blur'}
          ],
          stock: [
            {required: true, message: '请输入商品库存', trigger: 'blur'}
          ],
          type_id: [
            {required: true, message: '请选择商品分类', trigger: 'blur'}
          ],
        },
        restVisible:false,
        restdata:{
          new_password:'',
          platform_id:'',
        },
        restrules:{
          new_password: [
            {required: true, message: '请输入新密码', trigger: 'blur'}
          ],
        },
        key:'',
        spData:[],
      }
    },
    computed:{
      userdata(){
        return this.$store.state.login.user
      }
    },
    methods: {
      getClassified() {
        let thi = this
        const prams = {
          shop_id:thi.$store.state.login.user.id,
        }
        thi.mySelectAll('typeList',prams).then(function (value) {
          thi.spData = value.data
        })
      },
      edit(data){
        let thi = this
        this.editdata = JSON.parse(JSON.stringify(data))
        this.editdata.type = 1
        this.getClassified()
        if (thi.editdata.img !== '' || thi.editdata.img !== null) {
          thi.editdata.img =  thi.editdata.img.split(',')
          thi.$nextTick(function () {
            thi.$refs.my_upload_edit.medioData = thi.editdata.img
          })
        }
        this.editVisible = true
      },
      delImg(index){
        this.editdata.img.splice(index,1)
        console.log(this.editdata.img)
      },
      SubmitEdit(formName){
        let thi = this
        thi.editdata.shop_id = thi.$store.state.login.user.id
        thi.editdata.img = thi.editdata.img.join(',')
        thi.$refs[formName].validate((valid) => {
          if (valid) {
            thi.mySubmit('editCommodity', thi.editdata).then(function (code) {
              if (code==200) {
                thi.editVisible = false
                thi.getstart()
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      SubmitAdd(formName){
        let thi = this
        thi.adddata.shop_id = thi.$store.state.login.user.id
        thi.$refs[formName].validate((valid) => {
          if (valid) {
            thi.mySubmit('addCommodity', thi.adddata).then(function (code) {
              if (code==200) {
                thi.addVisible = false
                thi.getstart()
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      details(data){
        // this.$store.state.login.platformId = data
        if (data == 1){
          this.$router.push({name:'privateRoomDetail'})
        } else if (data == 2) {
          this.$router.push({name:'shoppingMallDetail'})
        }else {
          this.$router.push({name:'comment'})
        }
      },
      add(){
        this.getClassified()
        setTimeout(() => {
          this.addVisible = true
        }, 500)
      },
      //绑定表格数据，分页
      getstart() {
        let thi = this
        const prams = {
          page:thi.page,
          pageSize:thi.pageSize,
          shop_id:thi.$store.state.login.user.id,
        }
        thi.mySelectAll('oneCommodityList',prams).then(function (value) {
          thi.tableData = value.data
          thi.dataTotal = value.Total
        })
      },
      SuccessUpload(res){
        if (this.adddata.img == '') {
          this.adddata.img = this.adddata.img + res
        }else {
          this.adddata.img = this.adddata.img + ',' + res
        }
      },
      SuccessUploadEdit(res){
        this.editdata.img.push(res)
        console.log(this.editdata.img)
      },
      //选择展示数量
      handleSizeChange(val) {
        this.pageSize = val
        this.getstart()
      },
      //分页
      handleCurrentChange(val) {
        this.page = val
        this.getstart()
      },
      //状态改变提示
      changeMes(id, state) {
        var heeh = '该'
        var caozuo = '禁用'
        if (id.length > 1) {
          heeh = '这些'
        }
        if (state == 0) {
          caozuo = '删除'
        }
        let thi = this
        thi.$confirm('此操作将'+caozuo + heeh+'商品', '是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {
          thi.submitState(id,state)
        }).catch(() => {
          thi.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      //删除
      submitState(id,state) {
        let thi = this
        const por = {
          id: id,
          state: state,
        }
        console.log(por)
        thi.mySubmit('editCommodityState', por).then(function (code) {
          if (code == 200) {
            thi.getstart()
          }
        })
      },
    }
  }

</script>

<style scoped>
  .main {
    background-color: white;
    min-height: 500px;
    padding: 10px;
    border: #EDEDED 1px solid;
    border-radius: 5px;
  }
  .el-row{
    /*防止页面抖动*/
    width: calc(100% - 2px) !important;
  }
  .cmap{
    width: 100%;
    height: 400px;
    margin-bottom: 10px;
  }
  .search-cont{
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 999999;
  }
  .mapTxt {
    text-align: center;
    width: 220px;
    padding: 4px;
    overflow: hidden;
    font-size: 14px;
    font-weight: bold;
    white-space: normal;
    margin-left: 40px;
    margin-top: 40px;
  }
</style>
